<!--
 @description 招商管理-意向客户管理
 @fileName index.vue
 @author zengqiongying
 @created 2023/04/13 14:51:03
-->
<template>
  <div>
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="输入客户名称/电话/招商经理"
        :show-action="false"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
      />
    </div>

    <div class="ctm-content-tabs-sticky">
      <qmp-tabs
        ref="qmpTabs"
        v-model:active="activeTab"
        lazy-render
        @click-tab="onClickTab"
        animated
        class="tab-nav-transparent"
      >
        <qmp-tab v-for="(tab, i) in tabs" :key="i" :title="tab.buttonName" :name="tab.buttonCode">
          <div class="customer-list">
            <PotentialCustomerList
              :ref="tab.buttonCode"
              :search-value="searchValue"
              :type="tab.buttonCode"
              @stop="onStop"
              @allocation="onAllocation"
            />
          </div>
        </qmp-tab>
      </qmp-tabs>
    </div>
    <div class="ctm-content-foot">
      <qmp-button type="primary" round class="btn ctm-btn-main" @click="toAddPage">新增意向客户</qmp-button>
    </div>
    <Termination
      v-if="showTermination"
      v-model:show="showTermination"
      :showDesc="true"
      title="意向客户终止"
      :detailData="rowData"
      @submit="onTermination"
    />
    <Allocation v-model:show="showAllocation" v-if="showAllocation" :detailData="rowData" @success="initRefresh" />
  </div>
</template>

<script lang="ts">
  import { ref, reactive, toRefs, onMounted, onActivated, getCurrentInstance } from 'vue'
  import { onBeforeRouteLeave } from 'vue-router'
  import { useStore } from 'vuex'
  import SearchInput from '@/components/SearchInput/index.vue'
  import PotentialCustomerList from './components/List.vue'
  import Termination from './components/Termination.vue'
  import Allocation from './components/Allocation.vue'
  import { useRouter } from 'vue-router'
  import { terminatetItem } from '@/apis/attractInvestment/potentialCustomer'
  import { queryBtnList } from '@/apis/dataDict'

  interface type {
    searchValue: string
    activeTab: string
    tabs: { buttonName: string; buttonCode: string }[]
    listReLoad: boolean
    showTermination: boolean
    showAllocation: boolean
    rowData: string | object
  }
  export default {
    name: 'PotentialCustomer',
    components: { SearchInput, PotentialCustomerList, Termination, Allocation },
    setup() {
      const $store = useStore()
      const instance = getCurrentInstance()
      const qmpTabs = ref()
      const { proxy }: any = instance

      const datas = reactive<type>({
        searchValue: '',
        activeTab: '',
        tabs: [],
        showTermination: false, // 是否显示终止页
        showAllocation: false, // 分配
        rowData: '',
        listReLoad: false
      })
      const $router = useRouter()

      const onSearch = () => {
        // 搜索
        proxy.$refs[`${datas.activeTab}`] && proxy.$refs[`${datas.activeTab}`][0].resetPageData()
      }
      const onClear = () => {
        // 搜索
      }

      // 刷新数据
      const initRefresh = () => {
        proxy.$refs[`${datas.activeTab}`] && proxy.$refs[`${datas.activeTab}`][0].resetPageData()
      }

      const onClickTab = () => {
        // 点击tab
        proxy.$refs[`${datas.activeTab}`] && proxy.$refs[`${datas.activeTab}`][0].resetPageData()
      }
      // 新增意向客户
      const toAddPage = () => {
        $router.push({
          path: '/potentialCustomer/add'
        })
      }

      // 终止 弹框
      const onStop = (row: any) => {
        console.log('终止')
        datas.showTermination = true
        datas.rowData = row
      }
      // 终止 请求后台
      const onTermination = (data: any) => {
        terminatetItem(data)
          .then((res: any) => {
            if (res.success === 1) {
              proxy.$toast('终止成功')
              initRefresh()
            }
            datas.showTermination = false
            datas.rowData = ''
          })
          .catch((e: any) => {
            if (e) proxy.$toast(e || '终止失败')
          })
      }
      // 分配
      const onAllocation = (row: any) => {
        console.log('分配')
        datas.showAllocation = true
        datas.rowData = row
      }

      onMounted(() => {})
      onBeforeRouteLeave((to, from, next) => {
        const instanceName = instance?.type?.name
        if (to.name === 'Index') {
          $store.commit('routerKeep/removeCache', instanceName)
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
        }
        next()
      })

      proxy.$SimpleEvents.registerEvent('refreshCustomerChangeList', () => {
        datas.listReLoad = true
      })
      proxy.$SimpleEvents.registerEvent('refreshCustomerChangeItem', (id: any) => {
        if (!id) return
        // 编辑
        proxy.$refs[`${datas.activeTab}`] && proxy.$refs[`${datas.activeTab}`][0].refreshItem(id)
      })

      onActivated(() => {
        // 缓存路由才生效
        if (datas.listReLoad) {
          proxy.$refs[`${datas.activeTab}`] && proxy.$refs[`${datas.activeTab}`][0].resetPageData()
        }
        datas.listReLoad = false
      })

      // 按钮权限
      const getBtnList = async () => {
        const res: any = await queryBtnList('potentialcustomer')
        const { success, data = [] } = res
        if (success === 1) {
          datas.tabs = data
          datas.activeTab = data.length && data[0].buttonCode
        }
      }
      getBtnList()

      return {
        ...toRefs(datas),
        qmpTabs,
        onSearch,
        onClear,
        onClickTab,
        toAddPage,
        onStop,
        onAllocation,
        initRefresh,
        onTermination
      }
    }
  }
</script>
<style lang="less" scoped>
  .customer-list {
    position: relative;
    padding: 0 14px 58px;
  }
</style>
